<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页</title>
    <script src="./js/jquery.1.11.3.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/deteli.css">
    <link rel="stylesheet" href="./css/icon/iconfont.css">
    <script src="./js/axios.js"></script>
    <script src="./js/cookie.js"></script>
</head>

<body>
    <header></header>
    <div class="conn_full">


        <div class="conn clean">
            <div class="shop_box">
                <div class="b1">
                    <ul>
                        <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </li>
                        <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                        </li>
                        <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                        </li>
                        <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                        </li>
                        <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                alt="">
                        </li>
                        <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                alt="">
                        </li>
                        <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                alt="">
                        </li>
                        <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                alt="">
                        </li>
                    </ul>
                    <div class="zoom">

                    </div>
                </div>
                <div class="b2">
                    <span id="btn_1">&lt;</span>
                    <div class="b2_b">
                        <ul>
                            <li class="now_click"><img
                                    src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                    alt="">
                            </li>
                            <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                    alt="">
                            </li>
                            <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                    alt="">
                            </li>
                            <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                    alt="">
                            </li>
                            <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                                    alt="">
                            </li>
                            <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g3/M0A/03/0F/Cg-4V1FbiZeINn8vAAFviQrVBBEAAHPTwKpQO8AAW-h361.jpg"
                                    alt="">
                            </li>
                            <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WVFbia6IW7b6AAF9LRyFs8IAAHPWQB1-SIAAX1F689.jpg"
                                    alt="">
                            </li>
                            <li><img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M08/04/00/Cg-4WlFbia6IYdh1AABMbohb1qwAAHPWQBz-ngAAEyG479.jpg"
                                    alt="">
                            </li>
                        </ul>
                    </div>
                    <span id="btn_2">&gt;</span>
                </div>
                <div class="b3">
                    <img src="https://mercrt-fd.zol-img.com.cn/t_s800x800f/g4/M03/00/0D/Cg-4WlHRS0yIfdoaAAIkAUjvtRgAAKCmQDCTQoAAiQZ034.jpg"
                        alt="">
                </div>
            </div>
            <div class="add_car">
                <p id="title">慕轲 时尚气质套装</p>
                <div class="price_1">
                    <span>奥莱价:</span>
                    <span id="price">369</span>
                </div>
                <div class="addshop_1">
                    <div class="num_0">
                        选择数量:
                    </div>
                    <div class="num_1">
                        <span>-</span><input type="text" value="1"><span>+</span>
                    </div>
                    <div class="num_2">
                        加入购物车
                    </div>
                </div>

            </div>
        </div>
    </div>
    <footer></footer>
</body>
<script>
    //插入头部和尾部
    $("header").load("header.html");
    $("footer").load("footer.html");
    //解析查询字符串
    let pid = location.search.replace("?", "")
    console.log(pid);
    if (!pid) {
        $(location).attr('href', "list.html");
    }
    $.get(`http://jx.xuzhixiang.top/ap/api/detail.php?id=${pid}`).then(res => {
        console.log(res.data);
        res.data.pimg = res.data.pimg.split(",")
        let str = ""
        for (let i = 0; i < res.data.pimg.length; i++) {
            str += `
            <li><img src="${res.data.pimg[i]}"
                    alt="">
            </li> `
        }
        $(".b2_b ul").html(str)
        $(".b1 ul").html(str)
        $("#title").text(res.data.pname)
        $("#price").text(res.data.pprice)
    }).then(function () {
        aabb();
    })

    //请求完成之后需要运行的函数
    function aabb() {
        $(".b2_b ul li").click(function () {
            let index = $(".b2_b ul li").index(this)
            $(".b1 ul").stop().animate({
                left: index * -400
            }, 500)
            $(this).addClass("now_click");
            $(this).siblings().removeClass("now_click");
            $(".b3").children().attr("src", $(this).children().attr("src"))

        })
        $(".b2_b ul li").eq(0).click()

        $("#btn_1").click(function () {
            let a1 = parseFloat($(".b2_b ul").css("left"))
            if (a1 > -60) {
                a1 = -60
            }
            $(".now_click").prev().click()
            $(".b2_b ul").stop().animate({
                left: a1 + 60
            }, 500)
        })
        $("#btn_2").click(function () {
            $(".now_click").next().click()
            $(".b2_b ul").stop().animate({
                left: $(".now_click").index() * -60
            }, 500)
        })

        //放大镜效果
        $(".b3").hide();
        $(".zoom").hide();
        $(".b1").mouseover(function () {
            $(".zoom").show();
            $(".b3").show();

            // console.log("ok");
        }).mousemove(function (e) {
            let evt = e || event;
            let x = evt.pageX - $(".b1").offset().left - $(".zoom").width() / 2;
            let y = evt.pageY - $(".b1").offset().top - $(".zoom").height() / 2;
            // console.log(x, y);
            let xx = $(".b1").width() - $(".zoom").width();
            let yy = $(".b1").height() - $(".zoom").height();
            // console.log(xx, yy);
            x = x <= 0 ? 0 : x > xx ? xx : x;
            y = y <= 0 ? 0 : y > yy ? yy : y;
            $(".zoom").css({
                left: x,
                top: y
            })
            $(".b3 img").css({
                left: x * -2,
                top: y * -2
            })

        }).mouseout(function () {
            $(".zoom").hide();
            $(".b3").hide();

        })
        //购物车加减商品
        console.log($(".num_1").children().eq(2));
        let k = 1;
        $(".num_1").children().eq(2).click(function () {
            k++;
            $(".num_1").children().eq(1).val(k);
        });
        $(".num_1").children().eq(0).click(function () {
            k--;
            if (k <= 1) {
                $(".num_1").children().eq(1).val(1);
            } else {
                $(".num_1").children().eq(1).val(k);
            }
        });
        $(".num_1").children().eq(1).change(function () {
            if ($(this).val() <= 0) {
                $(this).val(1)
            }
        })
        //加入购物车
        let uid = getCookie("uid")
        $(".num_2").click(function () {
            if (getCookie("uid")) {
                $.get(
                        `http://jx.xuzhixiang.top/ap/api/add-product.php?uid=${uid}&pid=${pid}&pnum=${$(".num_1").children().eq(1).val()}`
                    )
                    .then(res => {
                        console.log(res);
                        $(location).attr('href', "car.html");

                    })
            } else {
                $(location).attr('href', "login.html");
            }

        })

    }
</script>

</html>